<template>
  <div class="order-list">
		<el-card class="box-card">
		  		<div class="header1">
		  			<el-button type="primary" icon="el-icon-edit" @click="addShow">添加产品</el-button>
		  		</div>
		  		<div class="main">
		  			<el-table
					    :data="tableData"
					    stripe
					    v-loading="loading2"
					    style="width: 100%">
					    <el-table-column
					      prop="sort"
					      label="序号"
					      :formatter="formatter"
					      align="center">
					    </el-table-column>
					    <el-table-column
					      prop="productName"
					      align="center"
					      :formatter="formatter"
					      label="贷超名称">
					    </el-table-column>
					    <!-- <el-table-column
                          prop="createAt"
                          align="center"
                          :formatter="dateFormat1"
                          label="添加时间">
                        </el-table-column> -->
					    <el-table-column
					      prop="slogan"
					      align="center"
                          width="200"
					      :formatter="formatter"
					      label="宣传语">
					    </el-table-column>
					    <el-table-column
					      prop="productLogo"
					      align="center"
					      :formatter="formatter"
					      label="贷超图标">
					      <template slot-scope="scope">
					        <img style="width:54px;height:54px;" :src="scope.row.productLogo" height="1024" width="1024" alt="">
					      </template>
					    </el-table-column>
					    <el-table-column
					      prop="amount"
					      align="center"
					      :formatter="formatter"
					      label="额度">
					    </el-table-column>
					    <!-- <el-table-column
                          prop="clickNumbers"
                          :formatter="formatter"
                          align="center"
                          label="申请人数">
                        </el-table-column> -->
					    <el-table-column
					      prop="status"
					      align="center"
					      :formatter="formatter"
					      label="状态">
					    </el-table-column>
					    <el-table-column
					      align="center"
					      prop="tag"
					      :formatter="formatter1"
					      label="标识">
					      <!-- <template slot-scope="scope">
					        <img style="width:54px;height:54px;" src="../../images/loading_1.png" height="1024" width="1024" alt="">
					      </template> -->
					    </el-table-column>
					    <el-table-column
					      prop="productUrl"
					      align="center"
                          width="200"
                          how-overflow-tooltip
					      label="链接">
					    </el-table-column>
					    
					    <el-table-column
					    align="center"
					      label="操作">
					      <template slot-scope="scope">
					        <el-button @click="handleClick(scope.row)" type="text" size="small" >编辑</el-button> 
					        <span style="color:#409EFF">/</span>
					        <el-button type="text" size="small" @click="deleteFn(scope.row)">删除</el-button>
					      </template>
					    </el-table-column>
					 </el-table>
					<el-pagination
					  background
					  class="elpage"
					  v-show="!loading2"
				      @current-change="handleCurrentChange"
				      :current-page="currentPage4"
				      layout="total, prev, pager, next, jumper"
				      :total="totalCount">
				    </el-pagination>
		  		</div>
		</el-card>
		
		<el-dialog
	      title="添加产品"
	      :visible.sync="dialogVisible"
	      width="30%">
	      <div class="add">
	        <!-- <el-input v-model="addAccount" clearable placeholder="请输入贷超ID"><template slot="prepend">贷超ID</template></el-input> -->
	        <el-input v-model="addName" clearable placeholder="请输入名称"><template slot="prepend">名称</template></el-input>
	        <el-input v-model="addPhone" clearable placeholder="请输入宣传语"><template slot="prepend">宣传语</template></el-input>
	        <div class="datapic datapicCopy">
			  <el-form>
				<el-form-item label="图标" prop="typeId">
					<!-- :before-upload="beforeAvatarUpload" -->
		            <el-upload
					  :action="updataUrl"
					  list-type="picture-card"
					  :http-request="requestFile" 
					  :limit="1"
					  :file-list="fileList1"
					  :multiple="false"
					  :on-exceed="handleExceed"
					  :on-success="handleAvatarSuccess"
					  :before-upload="beforeAvatarUpload"
					  :on-remove="handleRemove">
					  <i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog >
					  <img width="100%" :src="imageUrladd" alt="">
					</el-dialog>
		        </el-form-item>
			  </el-form>
	      	</div>
	      	<el-input v-model="addsort" clearable placeholder="请输入序号"><template slot="prepend">序号</template></el-input>
	      	<!-- 标识 -->
	        <div class="datapic">
			  <el-form>
				<el-form-item label="标识" prop="typeId">
		            <el-select v-model="value1" placeholder="请选择">
		                <el-option v-for="item in options1" :label="item.label" :key="item.label" :value="item.value"></el-option>
		            </el-select>
		        </el-form-item>
			  </el-form>   
	      	</div>
	      	
	      	<!--额度 -->
	      	<!-- <div class="datapic">
	      					<el-form>
	      						<el-form-item label="产品类型" prop="typeId">
	      							<el-select v-model="productType" placeholder="请选择">
	      							    <el-option v-for="item in options3" :label="item.label" :key="item.label" :value="item.value"></el-option>
	      							</el-select>
	      						</el-form-item>
	      					</el-form>
	      	</div> -->
	      	
	      	<el-input v-model="addValue2" clearable placeholder="请输入额度"><template slot="prepend">额度</template></el-input>
			 <el-input v-model="addLink" clearable placeholder="请输入链接"><template slot="prepend">链接</template></el-input>
	      </div>
	      <span slot="footer" class="dialog-footer">
	        <el-button @click="addCancelFn">取 消</el-button>
	        <el-button type="primary" @click="addSubmitFn" :loading="isAddSubmit">确 定</el-button>
	      </span>
	    </el-dialog>
		<!-- 编辑账号  -->
		<el-dialog
	      title="编辑产品"
	      :visible.sync="dialogVisibleEdit"
	      width="30%">
	      <div class="add">
	        <!-- <el-input v-model="editAccount" clearable placeholder="请输入贷超ID"><template slot="prepend">贷超ID</template></el-input> -->
	        <el-input v-model="editName" clearable placeholder="请输入名称"><template slot="prepend">名称</template></el-input>
	        <el-input v-model="editPhone" clearable placeholder="请输入宣传语"><template slot="prepend">宣传语</template></el-input>
	        <div class="datapic datapicCopy">
			  <el-form>
				<el-form-item label="图标" prop="typeId">
		           <el-upload
					  :action="updataUrl"
					  list-type="picture-card"
					  :http-request="requestFile1" 
					  :limit="1"
					  :file-list="fileList2"
					  :multiple="false"
					  :on-exceed="handleExceed"
					  :on-success="handleAvatarSuccess"
					  :before-upload="beforeAvatarUpload1"
					  :on-remove="handleRemove">
					  <i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog >
					  <img width="100%" :src="imageUrl" alt="">
					</el-dialog>
		        </el-form-item>
			  </el-form>
	      	</div>
	      	<!-- <div class="datapic">
	      					<el-form>
	      						<el-form-item label="产品类型" prop="typeId">
	      							<el-select v-model="productType1" placeholder="请选择">
	      							    <el-option v-for="item in options3" :label="item.label" :key="item.label" :value="item.value"></el-option>
	      							</el-select>
	      						</el-form-item>
	      					</el-form>
	      	</div> -->
	      	<el-input v-model="editsort" clearable placeholder="请输入序号"><template slot="prepend">序号</template></el-input>
	      	<!-- 标识 -->
	        <div class="datapic">
			  <el-form>
				<el-form-item label="标识" prop="typeId">
		            <el-select v-model="value2Edit" placeholder="请选择">
		                <el-option v-for="item in options1" :label="item.label" :key="item.label" :value="item.value"></el-option>
		            </el-select>
		        </el-form-item>
			  </el-form>
	      	</div>
	      	<!-- 状态 -->
	      	<div class="datapic">
			  <el-form>
				<el-form-item label="状态" prop="typeId">
		            <el-select v-model="statusValue" placeholder="请选择">
		                <el-option v-for="item in options2" :label="item.label" :key="item.label" :value="item.value"></el-option>
		            </el-select>
		        </el-form-item>
			  </el-form>   
	      	</div>
	      	<!--额度 -->
	      	<el-input v-model="editLimit" clearable placeholder="请输入额度"><template slot="prepend">额度</template></el-input>
			 <el-input v-model="editLink" clearable placeholder="请输入链接"><template slot="prepend">链接</template></el-input>
	      </div>
	      <span slot="footer" class="dialog-footer">
	        <el-button @click="editCancelFn">取 消</el-button>
	        <el-button type="primary" @click="editSubmitFn" :loading="isAddSubmitEdit">确 定</el-button>
	      </span>
	    </el-dialog>

  </div>
</template>

<script>
import { loanManagementApi ,convertRequestURL} from '@/api/table'
import moment from 'moment'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
        tableData: [],
        currentPage4:1,
        dialogVisible:false,
        addAccount:"",
        addName:"",
        addPhone:"",
        addLink:"",
        isAddSubmit:false,
        value2:"",
        options1:[
        {
          value: '0',
          label: '空白'
        },
        {
          value: '1',
          label: 'new'
        },
        {
          value: '2',
          label: 'hot'
        },
        ],
        options2: [{
          value: '0',
          label: "下架"
        },
        {
          value: '1',
          label: "上架"
        },],
        dialogImageUrl: '',
        dialogVisible: false,
        dialogVisibleEdit:false,
        editAccount:"",
        editName:"",
        editLimit:"",
        editPhone:"",
        value2Edit:"0",
        addsort:"",
        editLink:"",
        editId:"",
        imageUrladd:"",
        addValue2:"",
        isAddSubmitEdit:false,
        dialogImageUrlEdit:"",
        value3Edit:"",
        pageSize:10,
        pageIndex:1,
        totalCount:null,
        value1:"",
        imageUrl:'',
        updataUrl:"",
        loading2:false,
        deleteId:"",
        fileList2:[{
        	name:"",
        	url:"",
        }],
        fileList1:[{
        	name:"",
        	url:"",
        }],
        options3:[{
          value: '1',
          label: "经典精品"
        },
        {
          value: '2',
          label: "新品推荐"
        },
        {
          value: '3',
          label: "小贴士"
        },],
        productType:"1",
        editsort:"",
        statusValue:"0",
    }
  },
  computed:{
  	 ...mapGetters([
      'needLogin'
    ]),
  },
  methods: {
    handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
       this.pageIndex=val
       this.initList()
    },
   /* detailClick(item){
    	this.$router.push({
    		path:"/orderDetails"
    	})
    	
    },*/
    clearAdd(){
    	//this.addAccount=""
    	this.addName=""
    	this.addPhone=""
    	this.value1=""
    	this.addValue2=""
    	this.addLink=""
    	this.addsort=""
    	this.imageUrladd=""
    	this.fileList1=[]

    },
    requestFile(msg){
        let formData = new FormData(),imgUrl;
        formData.append("iconFile", msg.file);
        console.log(formData);
        this.axios.post(this.updataUrl,formData,{headers:{
         'sessionId':window.localStorage.getItem("token")|| ''
    }})
          .then((response)=> {
            this.imageUrladd=response.data.data.iconUrl

          })
          .catch((error)=> {
            console.log(error);
        	this.$message({
	          message: 'resp.msg',
	          type: 'error'
	        });
          });


    },
    requestFile1(msg){
        let formData = new FormData(),imgUrl;
        formData.append("iconFile", msg.file);
        console.log(formData);
        this.axios.post(this.updataUrl,formData,{headers:{
         'sessionId':window.localStorage.getItem("token")|| ''
    }})
          .then((response)=> {
            this.imageUrl=response.data.data.iconUrl

          })
          .catch((error)=> {
            console.log(error);
        	this.$message({
	          message: "上传失败",
	          type: 'error'
	        });
          });


    },
    beforeAvatarUpload1(file){
    	//const isJPG = file.type === 'image/jpeg';
    	
        const isLt2M = file.size / 1024 < 500;
        /*if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }*/
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 500KB!');
        }
        return  isLt2M;
    },
    beforeAvatarUpload(file) {
    	console.log(file.size/ 1024)
        //const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024  < 500;
        /*if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }*/
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 500KB!');
        }
        return  isLt2M;
      },
    //删除
    deleteFn(msg){
    	console.log(msg)
    	this.deleteId=msg.id
    	this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        	/*let msg11={
        		productId:this.deleteId
        	}*/
        	loanManagementApi.manageProductDelete(this.deleteId)
	        .then(data=>{
	           console.log(data)
	            this.initList()
	        })
	        .catch(error => {
	            console.error(error)
	        })
        }).catch(() => {
                   
        });
    },
    //时间戳转换
    dateFormat1:function(row, column) { 
          var date = row[column.property]; 
           if (date == undefined) { 
             return "--"; 
           } 
           return moment(date).format("YYYY-MM-DD"); 
    },
  	handleAvatarSuccess(res, file) {
        //this.imageUrl = file.url.replace('blob:',"");
  		console.log(res+"//"+file.url)
      },
    // 编辑
    handleExceedEdit(files, fileList) {
        this.$message.warning(`当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    handlePictureCardPreviewEdit(file) {
		this.dialogImageUrlEdit = file.url;
		this.dialogVisibleEdit = true;
	},
	handleRemoveEdit(file, fileList) {
	console.log(file, fileList);
	},
	editCancelFn(){
		this.dialogVisibleEdit=false
		this.editClose()
	},
	editClose(){
		this.editName=""
		this.editPhone=""
		this.imageUrl=""
		this.value2Edit="0"
		this.editLimit=""
		this.editLink=""
	},
	editSubmitFn(){
		this.dialogVisibleEdit=false
		console.log(this.value2Edit)
		let msg = {
    		id:this.editId,
    		productName:this.editName,
		  	slogan:this.editPhone,
		  	productLogo:this.imageUrl,
		  	tag:this.value2Edit,
		  	amount:this.editLimit,
		  	productUrl:this.editLink,
		  	sort:this.editsort,
		  	status:this.statusValue,
    	}
    	console.log(msg)
    	loanManagementApi.manageProductUpdata(msg)
        .then(data=>{
        	console.log(data)
           if(data.code==0){
           		this.initList()
           		this.dialogVisibleEdit = false;
           }
        })
        .catch(error => {
        	this.dialogVisibleEdit = false;
            console.error(error)
        })
	},
	//添加
    handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
     },
	handleRemove(file, fileList) {
	console.log(file, fileList);
	},
	handlePictureCardPreview(file) {
	this.dialogImageUrl = file.url;
	this.dialogVisible = true;
	},
	formatter(row, column, cellValue, index){
		if(cellValue==undefined){
			return cellValue="--"
		}else{
			return cellValue
		}
	},
	formatter1(row, column, cellValue, index){
		if(cellValue==undefined){
			return cellValue="空白"
		}else{
			return cellValue
		}
	},
	//贷款超市列表接口
	initList(){
		let msg = {
			pageIndex:this.pageIndex,
			pageSize:this.pageSize,
		}
		this.loading2=true
		loanManagementApi.manageProductList(msg)
        .then(data=>{
           this.tableData=data.data.records;
           for(var i=0;i<this.tableData.length;i++){
           		if(this.tableData[i].status==1){
           			this.tableData[i].status="上架"
           		}else if(this.tableData[i].status==0){
           			this.tableData[i].status="下架"
           		}

           		if(this.tableData[i].tag==0){
           			this.tableData[i].tag="空白"
           		}else if(this.tableData[i].tag==1){
           			this.tableData[i].tag="new"
           		}else if(this.tableData[i].tag==2){
           			this.tableData[i].tag="hot"
           		}
           }
           this.loading2=false
           this.totalCount=data.data.totalCount
           this.currentPage4=data.data.pageNum
        })
        .catch(error => {
        	this.loading2=false
            console.error(error)
        })
	},
    //添加账号取消
    addCancelFn(){
      this.dialogVisible = false;
      this.clearAdd()
    },
    //添加账号确定提交
    addSubmitFn(){
      let msg = {
		  	//id:this.addAccount,
		  	productName:this.addName,
		  	slogan:this.addPhone,
		  	productLogo:this.imageUrladd,
		  	tag:this.value1,
		  	amount:this.addValue2,
		  	productUrl:this.addLink,
		  	sort:this.addsort,
		}
      loanManagementApi.manageProductAdd(msg)
        .then(data=>{
           console.log(data)
           if(data.code==0){
           		this.pageIndex=1;
           		this.initList()
           		this.dialogVisible = false;
           }
        })
        .catch(error => {
        	this.dialogVisible = false;
            console.error(error)
        })
    },
    addShow(){
      this.dialogVisible=true;
      this.clearAdd()
    },
    handleClick(item){
    	console.log(item.statusValue)
    	this.dialogVisibleEdit=true
    	this.editId=item.id
    	this.editName=item.productName
    	this.editPhone=item.slogan
    	this.imageUrl=item.productLogo
    	if(item.status=="下架"){
    		this.statusValue="0"
    	}else if(item.status=="上架"){
    		this.statusValue="1"
    	}
    	console.log(this.statusValue)
    	if(item.tag=="空白"){
    		this.value2Edit="0"
    	}else if(item.tag=="new"){
    		this.value2Edit="1"
    	}else if(item.tag=="hot"){
    		this.value2Edit="2"
    	}
    	this.editLimit=item.amount
    	this.editLink=item.productUrl
    	this.fileList2[0].url=item.productLogo
    	this.editsort=item.sort
    	//this.editId=this.editsort
    },
  },
  created(){
      this.initList()
      this.updataUrl=convertRequestURL('manage/product/uploadIcon')
      if(this.needLogin){
      	//window.localStorage.removeItem("token")
         //this.$router.replace({ path: '/login' })
      }
  },
}
</script>
<style>

    .order-list .el-table tr td:nth-child(8) .cell{
        /* width: 200px; */
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .order-list .el-table tr td:nth-child(3) .cell{
        /* width: 200px; */
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
</style>
<style>
 .bg-zm .el-input__inner{
	padding:0 4px;
	text-align: center;
}
.order-list .el-input-group__append, .el-input-group__prepend{
    padding: 0;
    width: 70px;
    text-align: center;
  }
  .order-list .datapic .el-input__inner{
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
   .order-list .datapic .el-date-editor.el-input{
      width: 305px;
    }
    .order-list .el-select{
    	display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
		display: -moz-box; /* Firefox 17- */
		display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
		display: -moz-flex; /* Firefox 18+ */
		display: -ms-flexbox; /* IE 10 */
		display: flex;
		padding-right: 6px;
    }
    .order-list .el-form-item__label{
    	background-color:#f5f7fa;
    	text-align: center;
    	padding: 0;
    	width: 70px; 
    	height: 40px;
    	font-weight: normal;
    	border: 1px solid #dcdfe6;
	    background-color: #f5f7fa;
	    text-align: center;
	    color: #909399;
	    border-right: 0;
	    border-radius: 4px;
	    -webkit-border-radius:4px;
	    -moz-border-radius:4px;
	    -webkit-box-sizing: inherit;
	       -moz-box-sizing: inherit;
	            box-sizing: inherit;
	    border-top-right-radius: 0;
	    border-bottom-right-radius: 0;
	    display: table-cell;
    }
    .order-list .datapicCopy .el-form-item__label{
    	height: 70px;
    	line-height: 70px;
    }
   .order-list .el-upload--picture-card,.order-list .el-upload-list__item{
   	width: 70px;
   	height: 70px;
   	line-height: 80px;
   }
   .order-list .el-upload-list__item-thumbnail{
		width: 70px;
		height: 70px;
   }
</style>
<style scoped lang="scss">
.bg-zm{
	.el-input{
		width:50px;
	}
}

	.order-list{
		font-size:14px;
		font-weight: normal;
		padding:10px;
		.box-card{
			width:100%;
			min-height:400px;
		}
	}
	.bg-purple{
		height:40px;
	}
	.span1{
		float: left;
		margin-right:10px;
		height:40px;
		line-height: 40px;
	}
	.mar10{
		margin-right: 10px;
	}
	.grid-content{
		float: left;
		margin-right: 10px;
	}
	.header1,.header2{
		height:40px;
		min-width: 964px;
	}
	.header2{
		margin-top:20px;
	}
	.main{
		margin-top:30px;
	}
	.elpage{
		margin:20px;
		float: right;
	}
	.add .el-input-group{
    width: 70%;
    margin-left:20px;
    margin-bottom: 20px;
  }
  .el-form-item__label{
    width:70px;
    float: left;
    line-height: 38px;
    border: 1px solid #dcdfe6;
    background-color: #f5f7fa;
    text-align: center;
    color: #909399;
    border-right: 0;
    border-radius: 4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -webkit-box-sizing: inherit;
       -moz-box-sizing: inherit;
            box-sizing: inherit;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    display: table-cell;
  }
  .datapic{
    width: 71%;
    margin-left:20px;
    height:40px;
    margin-bottom:20px;
  }
  .elpage{
    margin:20px;
    float: right;
  }
  .datapicCopy{
  	height:70px;
  }
  .datapicCopy .el-form-item__label{
  		height: 70px!important;
  }
</style>

